<template>
	<w-container class="plr-16 pb-16">
		<w-navbar id="my-nav" title="活动记录" bgColor="#F5F5F5"></w-navbar>
		<view class="item bg-color-item" v-for="(item,idx) in list" :key="idx" @click="check(item)">
			<w-image :src="item.image" width="83" height="83" radius="10"></w-image>
			<view class="right flex-center-sb">
				<view class="content">
					<text class="font-size-16 font-color-textPrimary font-w-500 mb-4" v-for="(items,idxs) in item.result" :key="idxs">
						<block v-if="items.number>1">{{ handleLang(items.name) }} x{{items.number}}</block>
						<block v-else>{{ handleLang(items.name) }}</block>
					</text>
					<text class="font-size-10 font-color-describe mt-6">{{ item.create_time }}</text>
				</view>
				<w-icon name="arrow-right" size="24" color="#fdfdfd"></w-icon>
			</view>
		</view>
		<w-loading :type="loadingType" emptyType="search" emptyTop="100"></w-loading>
		<w-modal v-model="showDetails" :title="handleLang('材料详情')" :showButton="false" :close="true">
			<view class="detailscon mt-16">
				<view class="flex-center-sb mb-12" v-for="(item,idx) in consume" :key="idx">
					<w-image :src="item.image" width="42" height="42" radius="4"></w-image>
					<view class="right flex-center-sb">
						<view>
							<text class="font-size-14 mb-4 font-color-textPrimary font-w-500">{{ handleLang(item.name )}}</text>
							<text class="font-size-10 font-color-describe"># {{ item.collection_code }}/{{item.total_num}}</text>
						</view>
						<text class="font-size-14 font-color-999">{{ handleLang(statusText[item.method]) }}</text>
					</view>
				</view>
			</view>
			<w-button class="btnStyle" @click="toPage">{{handleLang('去查看我的藏品')}}</w-button>
		</w-modal>
	</w-container>
</template>

<script>
	import { recordList } from '@/api/compound/index.js';
	export default {
		data() {
			return {
				showDetails: false,
				loadingType:'none',
				isNext:true,
				page:1,
				list:[],
				consume:[], // 消耗列表
				statusText:{
					'10':'销毁',
					'20':'保留',
					'30':'回收'
				}
			};
		},
		onLoad() {
			this.getList();
		},
		methods:{
			// 查看
			check(item){
				this.consume = item.consume;
				this.showDetails = true;
			},
			refresh() {
				this.loadingType = 'none';
				this.isNext = true;
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 获取列表
			getList() {
				this.loadingType = 'loading';
				recordList({ page:this.page,type:1 }).then(res=>{
					uni.stopPullDownRefresh()
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.page<last_page){
						this.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'none';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{ uni.stopPullDownRefresh();this.loadingType = 'empty' })
			},
			toPage(){
				let isApp=uni.getStorageSync('app')
				if(isApp){
					let isIos = window.localStorage.getItem('ios')
					let action = JSON.stringify({
						action:"gotoActivity",
						params:{
							pageKey:'collection',
						}
					})
					if (isIos) {
						window.webkit.messageHandlers.callbackHandler.postMessage(action);
					} else {
						Android.webCallback(action)
					}
				}else{
					// uni.navigateTo({
					// 	url:'/pages/myCollection/myCollection'
					// })
					uni.switchTab({
						url:"/pages/my/my"
					})
				}
			},
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.isNext && this.getList();
		}
	}
</script>

<style lang="scss">
	.item{
		width: 100%;
		padding: 16rpx 26rpx 16rpx 16rpx;
		border-radius: 20rpx;
		@extend .mt-12,.flex-center-sb;
		>.right{
			width: calc(100% - 200rpx);
			@extend .flex-center-sb;
			
			>.content{
				width: 100%;
				min-height: 140rpx;
				@extend .flex,.flex-dir-col,.flex-js-sb;
			}
		}
	}
	.detailscon{
		width: 100%;
		max-height: 40vh;
		overflow-y: scroll;
		
		.right{
			width: calc(100% - 104rpx);
			
			>view{
				width: 80%;
				>text{ display: block; }
			}
		}
	}
	.btnStyle{
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 108rpx;
	}
</style>
